<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div.show {
        width: 400px;
        height: 150px;
        border: 10px solid pink;
        margin: 30px auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: relative;
    }

    img {
        width: 100px;
        height: 100px;
        display: block;
    }

    .current {
        width: 288px;
        height: 180px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;

    }

    .current>img {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        transition: opacity .5s linear
    }

    .current>img.active {
        opacity: 1;
    }

    .current.active {
        display: block;
    }
</style>

<body>
    <div class="show">
        <img src="img/1.png" alt="">
        <img src="img/2.png" alt="">
        <img src="img/3.png" alt="">
    </div>
    <div class="current">
        <img src="img/1.png" alt="">
        <img src="img/2.png" alt="">
        <img src="img/3.png" alt="">
    </div>
</body>
<script>
    //1.先获取元素
    var show_imgs = document.querySelectorAll(".show img")
    var current = document.querySelector(".current")
    var current_imgs = document.querySelectorAll(".current img")
    //2.绑定事件
    show_imgs.forEach(function (item, index) {  //每一个item实际上就是一个img标签
        //2-1.绑定移入事件
        item.addEventListener('mouseover', function () {
            current.classList.add('active')
            for (var i = 0; i < current_imgs.length; i++) {
                console.log("清除类名")
                current_imgs[i].className = ""
            }
            current_imgs[index].classList.add('active')
        })
        //2-2.绑定移动事件
        item.addEventListener('mousemove', function (e) {
            // 3. 获取坐标点
            var x = e.clientX + 10
            var y = e.clientY + 10
            // 给 p 的 left 和 top 赋值
            current.style.left = x + 'px'
            current.style.top = y + 'px'
        })
        //2-3.绑定移出事件
        item.addEventListener('mouseout', function () {
            // p 隐藏
            current.classList.remove('active')
        })

    })
</script>

</html>